﻿<div class="doc-part-box" id="cachepage">
  <style>
    .cachepagedemo {
      display: flex;
      justify-content: space-between;
      border: 5px solid #eeeeee;
      padding-bottom: 10px;
    }

    #main_menu1 {
      width: 80px;
      margin: 0;
      list-style: square;
    }

    .main {
      width: 100%;
    }
  </style>
  <h2>CachePage</h2>
  <p>缓存页,每显示一个页面时,缓存当前的页面</p>
  <input class="input-check" name="radiogroup1" type="radio" id="cache_def" />
  <label onclick="changethem('cache_def')" class="input-check-label" for="cache_def"><b class="radio"></b>default</label>
  <input class="input-check" name="radiogroup1" type="radio" id="cache_primary" />
  <label onclick="changethem('cache_primary','primary')" class="input-check-label primary" for="cache_primary"><b class="radio"></b>primary</label>
  <input class="input-check" name="radiogroup1" type="radio" id="cache_danger" />
  <label onclick="changethem('cache_danger','danger')" class="input-check-label danger" for="cache_danger"><b class="radio"></b>danger</label>
  <input class="input-check" name="radiogroup1" type="radio" id="cache_success" />
  <label onclick="changethem('cache_success','success')" class="input-check-label success" for="cache_success"><b class="radio"></b>success</label>
  <br />
  <div class="cachepagedemo">
    <ul id="main_menu1">
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
      <li>
        <a href="javascript:void(0)"></a>
      </li>
    </ul>
    <div class="main">
      <div class="tabsbox" id="tabsbox1">
        <a class="tabsbox-left"></a>
        <nav class="tabsbox-navbox">
          <div class="tabsbox-nav"></div>
        </nav>
        <a class="tabsbox-right"></a>
        <span class="tabsbox-menutitle">功能</span>
        <div class="tabsbox-menugroup">
          <span class="tabsbox-goto-active">定位当前页</span>
          <span class="tabsbox-close-all">关闭全部</span>
          <span class="tabsbox-close-other">关闭其它</span>
        </div>
      </div>
      <div id="mainbox"></div>
    </div>
  </div>
  <h4>实现逻辑</h4>
  <p>
    使用document.createDocumentFragment这个方法,将当前页面移到 "片段"中,"片段"并不在document中,所以不会引起混乱.保持一个对它的引用,在显示曾经打开过的页面时, 再添加到document中即可.如此可实现不用iframe的方案.
  </p>
  <h4>选项卡HMTL</h4>
  <pre>
        &lt;div class="tabsbox" id="tabsbox1"&gt;
            // 向左按钮
            &lt;a class="tabsbox-left"&gt;&lt;/a&gt;

            // 导航区
            &lt;nav class="tabsbox-navbox"&gt;&lt;div class="tabsbox-nav"&gt;&lt;/div&gt;&lt;/nav&gt; 

            // 向右按钮
            &lt;a class="tabsbox-right"&gt;&lt;/a&gt;

            // 功能按钮组
            &lt;span class="tabsbox-menutitle"&gt;功能&lt;/span&gt;
            &lt;div class="tabsbox-menugroup"&gt;
                &lt;span class="tabsbox-goto-active"&gt;定位当前页&lt;/span&gt;
                &lt;span class="tabsbox-close-all"&gt;关闭全部&lt;/span&gt;
                &lt;span class="tabsbox-close-other"&gt;关闭其它&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        </pre>
  <h4>功能与特点</h4>
  <ul>
    <li>点击左侧菜单时,缓存当前页面,新增选项卡,显示新页面.如果菜单已经打开过,则显示对应选项卡.</li>
    <li>导航按钮:每个选项卡对应一个缓存页面,当选项卡超出可视范围后,使用前进后退按钮滚动选项卡框</li>
    <li>当被点击的选项卡靠近选项卡框的两端,则调整该选项卡到中间位置</li>
    <li>关闭所有选项卡.关闭除活动选项卡外的.定位当前活动选项卡,当其不在可视范围内时.</li>
    <li>当前活动页面不缓存,页面由缓存到显示后,其对应缓存会删除</li>
    <li>缓存页面使用document.createDocumentFragment,加入其中的DOM会从当前文档中脱离.用以替代经典的iframe方法</li>
    <li>经过测试,一个填写过的表单页面在放入文档片段对象之后,再取出来时,其状态不变.</li>
  </ul>
  <h4>用途</h4>
  <p>该功能用于一个经典的场景,在管理系统中,左侧菜单,右侧显示页面.点击左侧菜单时,打开多个页面.</p>
  <p>为了避免页面冲突,通常是使用iframe来解决的,这个方案用于替代iframe.</p>
  <h4>用法</h4>
  <p>在点击菜单时,调用cachepage.load方法,会将当前活动页面加入到缓存中,然后显示菜单对应页面到显示区</p>


  <script>
    // 选项卡框Dom对象
    let tabsDom = document.getElementById('tabsbox1');
    // 显示内容Domc对象
    let contDom = document.getElementById('mainbox');
    // cachepage
    let cpg = cachepage(tabsDom, contDom);
    // 左侧菜单绑定事件
    let menus = ['MainPage', '人员管理', '部门管理', '订单管理', '资料管理', '报表管理', '信息查询', '日志查询', '财务会计', '权限设置', '系统设置'];
    let menubox = document.getElementById('main_menu1');
    menubox.querySelectorAll('a').forEach((item, index) => {
      item.innerHTML = menus[index];
      //
      item.onclick = () => {
        let cacheDom = cpg.load(index, menus[index]);
        contDom.innerHTML = '';
        if (cacheDom) {
          contDom.append(cacheDom);
        } else {
          contDom.innerHTML = `<h1>${menus[index]}</h1>`;
        };
      };
    });
    // 默认载入MainPage页
    menubox.querySelector('a').click();

    // 换色
    function changethem(btnId, classN) {
      let btn = document.getElementById(btnId);
      let cachepagebox = document.getElementById('tabsbox1');
      cachepagebox.classList.remove('primary', 'success', 'danger');
      if (classN)
        cachepagebox.classList.add(classN);
    }
  </script>
</div>